<!DOCTYPE>
<html>
<head>
    <title>详情页</title>
    <style>

        /* 设置nav的大小 */
        .nav{

            /* 设置宽度和高度 */
            width: 1210px;
            height: 48px;
            /* 设置背景颜色 */
            background-color: #E8E7E3;

            margin:10px auto;

        }

        /* 设置nav中li */
        .nav li{
            /* 设置li向左浮动，已使菜单横向排列 */
            float: left;
            /* 设置li的高度 */
            /* height: 48px; */
            /* 将文字在父元素中垂直居中 */
            line-height: 48px;

        }

        /* 设置a的样式 */
        .nav a{
            /* 将a转换为块元素 */
            display: block;
            /* 去除下划线 */
            text-decoration: none;
            /* 设置字体颜色 */
            color: #777777;
            /* 修改字体大小 */
            font-size: 18px;

            padding: 0 39px;
        }
        /*修改最后一个快标签大小*/
        .nav li:last-child a{
            padding: 0 42px 0 41px;
        }

        /* 设置鼠标移入的效果 */
        a:hover{
            background-color: #3F3F3F;
            color: #E8E7E3;
        }
        a{text-decoration:none;
            color: #777777;
            /* 修改字体大小 */
            font-size: 18px;
            padding: 0 39px;}
        a.pic {
            padding: 30 40px;
        }
        input.cc{
            width: 400px;
            background-color: #1b111130;
            color: black;
            height: 30px;
        }
        input.c{
            width: 40px;
            background-color: #1b111130;
            color: black;
            height: 30px;
        }
    </style>
</head>
<body>
<h1>图书库</h1>
<ul class="nav">
    <li>
        <a href="/login">您好，请先登录</a>
    </li>
    <li>
        <a href="/register">免费注册</a>
    </li>
    <li>
        <a href="/logout">退出登录</a>
    </li>
    <li>
        <a href="/">点我返回首页</a>
    </li>
    <li>
        <a href="/index/recenthot">近期热门</a>
    </li>
    <li>
        <a href="/index/goodbooks">高分图书</a>
    </li>
</ul>
<table>
    <tr>
        <td><form action="/books/searchBook">
            <input class="cc" name="findName" placeholder="搜索书名" style="width:400px" value=""/>
            <input class="c" type="submit" value="搜索"/>
        </form></td>
    </tr>
</table>
<button><a href="/user/recommender">个性化推荐</a></button>
<button><a href="/books/hot">历史热门推荐</a></button>
<h3>为您搜索到如下内容：</h3>
<table>
    <#list page.iterator() as book>
        <tr>
            <td>${book.bookId}</td>
            <td><a href="/books/details?bookid=${book.bookId}">${book.title}</a></td>
            <td></td>
        </tr>
    </#list>
    <tr>
        <td>
            <#if page.hasPrevious()><a href="/books/searchBook?pageNumber=${page.number-1}&findName=${findName}">上一页：${page.number}</a></#if>
        </td>
        <td><a>当前页: ${page.number+1}</a></td>
        <td>
            <#if page.hasNext()><a href="/books/searchBook?pageNumber=${page.number+1}&findName=${findName}">下一页：${page.number+2}</a></#if>
        </td>
    </tr>
</table>
<tr></tr>
</body>
</html>